<template>
  <div class="index-container">
    <div>
      用户名：
      <el-input
        v-model="newUsername"
        placeholder="请输入用户名"
        style="width: 120px"
      ></el-input>
      密码：
      <el-input
        v-model="newPassword"
        show-password
        placeholder="请输入密码"
        style="width: 120px"
      ></el-input>
      打分赛道：
      <el-input
        v-model="newScreen"
        placeholder="请输入打分赛道"
        style="width: 120px"
      ></el-input>
      <el-button type="success" @click="add()">添加</el-button>
    </div>
    <br />
    <div>
      <el-table ref="multipleTable" :data="data" border style="width: 90%">
        <el-table-column label="序号" prop="rownum"></el-table-column>
        <el-table-column label="id" prop="id"></el-table-column>
        <el-table-column label="用户名" prop="username"></el-table-column>
        <el-table-column label="打分赛道" prop="screen" width="80px">
          <template slot-scope="scope">
            <el-input v-model="scope.row.screen" type="number"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              @click="update_screen(scope.row, scope.$index)"
            >
              改赛道
            </el-button>
            <el-button type="danger" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
        <el-table-column label="新密码" prop="password">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.password"
              show-password
              placeholder="输入新密码"
              style="width: 120px"
            ></el-input>
            <el-button
              type="success"
              @click="update_pass(scope.row, scope.$index)"
            >
              改密码
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  import api from '../main'
  import Qs from 'qs'
  export default {
    name: 'Manage',
    data() {
      return {
        data: [],
        newUsername: '',
        newPassword: '',
        newScreen: '0',
      }
    },
    mounted() {
      this.fresh()
    },
    methods: {
      add() {
        let params = {
          username: this.newUsername,
          password: this.newPassword,
          screen: this.newScreen,
        }
        let that = this
        this.$http
          .post(api + '/user/add', params)
          .then(function () {
            that.newUsername = ''
            that.newPassword = ''
            that.newScreen = ''
            that.$message('添加用户成功！')
            that.fresh()
          })
          .catch(function (error) {
            console.log(error)
          })
      },
      del(row) {
        if (row.username == 'root') this.$message('不能删除超级管理员！')
        else {
          let param = Qs.stringify({ id: row.id })
          let that = this
          this.$http
            .post(api + '/user/del', param)
            .then(function () {
              that.$message('删除用户成功！')
              console.log('删除' + row.id)
              that.fresh()
            })
            .catch(function (error) {
              console.log(error)
            })
        }
      },
      update_screen(row, pos) {
        if (row.screen == '' || row.screen == null)
          this.$message('赛道不能为空！')
        else {
          let params = { id: row.id, screen: row.screen }
          let that = this
          this.$http
            .post(api + '/user/update_screen', params)
            .then(function () {
              that.$message('改赛道成功！')
              that.fresh()
            })
            .catch(function (error) {
              console.log(error)
            })
        }
      },
      update_pass(row, pos) {
        if (row.password == '' || row.password == null)
          this.$message('新密码不能为空！')
        else {
          let crypto = require('crypto')
          const md5 = crypto.createHash('md5')
          md5.update(row.password)
          let md5password = md5.digest('hex')
          let params = { id: row.id, password: md5password }
          let that = this
          this.$http
            .post(api + '/user/update_pass', params)
            .then(function () {
              that.$message('新密码设置成功！')
              that.fresh()
            })
            .catch(function (error) {
              console.log(error)
            })
        }
      },
      fresh() {
        let that = this
        this.$http
          .post(api + '/user/list')
          .then(function (res) {
            //console.log(res.data)
            that.data = res.data
          })
          .catch(function (error) {
            console.log(error)
          })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .index-container {
    padding: 0 !important;
    margin: 0 !important;
    background: #f5f7f8 !important;
  }
</style>
